<template>
  <div class="sev_lis_wrapper">

    <el-table
      ref="bbb"
      :data="service_list"
      style="width: 100%"
      :default-sort = "{prop: 'date', order: 'descending'}"
      >
      <el-table-column
        align="center"
        prop=""
        label="图标"
        width="100">
        <template>
          <i class="el-icon-s-order" style="font-size: 30px"></i>
        </template>
      </el-table-column>
      <el-table-column
        prop="servicename"
        label="服务名"
        sortable
        width="100">
      </el-table-column>
      <el-table-column
        prop="price"
        label="服务价格"
        sortable
        width="100">
      </el-table-column>
      <el-table-column
        prop="sno"
        label="服务代号"
        width="140"
        sortable
        >
      </el-table-column>
      <el-table-column
        prop="memo"
        label="服务描述"
        width="200"
        sortable>
      </el-table-column>
      <el-table-column
        prop="memo"
        label="备注"
        width="200"
        sortable>
      </el-table-column>
      <el-table-column
        align="center"
        label="操作">
        <template slot-scope="scope">
          <div style="display: flex;box-shadow: 0 0 0px red;">
            <div style="margin: auto auto;position:relative;">
              <el-button @click = "seeImg(scope.$index)" style="box-shadow: 0 0 0px red;" type="text" size="small">查看</el-button>
              <el-image :ref="'abc'+scope.$index" 
                :src="url" 
                :preview-src-list="scope.row.urlList">
              </el-image>  
            </div>
            
            <el-button style="margin-left: 15px" type="text" size="small" @click="form_show_update =true;cur_service_id=scope.row.id">编辑</el-button>
            <el-button style="margin-right: 120px;color:red" type="text" size="small" @click="del(scope.row.id)" >删除</el-button>
          </div>

        </template>
      </el-table-column>
    </el-table>


  <div class="el-icon-circle-plus add_service_btn" @click="()=>{form_show = true}"></div>

  <!-- <div class="service_form_wrapper"> -->
    <ServiceForm  :form_show = "form_show" @form_show_change="form_change_change" ></ServiceForm>
    <ServiceUpdate  :service_id="cur_service_id" :form_show_update ="form_show_update" @form_show_update_change="form_update_change_change" ></ServiceUpdate>
  <!-- </div> -->

  </div>
</template>

<script>
import axios from 'axios';
import ServiceForm from '../components/ServiceForm';
import ServiceUpdate from '../components/ServiceUpdate';
import {myGet, myPost, myPostBody, myDelet, myDeleteBody} from '../utils/api'
  export default {
    data() {
      return {
        cur_service_id: -1, 
        service_list: [],
        form_show_update: false,
        form_show: false,
        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        srcList: [
          'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
          'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg'
        ]
      }//data return end 
    },
    mounted(){
      console.debug("sdfsdgfdg");
      myGet('/services/s', null).then(res=>{
        var list = res.data.res.records;
        list.forEach(e => {
          e.price = '￥'+e.price
        });
        this.service_list = list
        // console.debug(res.data.res.records);
        // console.debug(this.service_list)
      }).catch(err=>{console.debug(err)})

    },
    watch:{
      // cur_service_id(newv, oldv){
      //   console.debug('cur_service_id:', newv)
      // }
    },
    components: {ServiceForm, ServiceUpdate},
    methods: {
      form_change_change(e){
        console.debug(e)
        this.form_show = e
        console.debug(e)
      },
      form_update_change_change(e){
        console.debug(e)
        this.form_show_update = e
        console.debug(e)
      },
      del(e){
        console.debug(e)
        myDeleteBody('/services', {'ids': [e]}).then(res=>{
          console.debug(res);
          this.$message({showClose: true, message: '删除成功', type: 'success'})
          this.$router.go(0)
        }).catch(err=>{this.$message({showClose: true, message: '删除失败', type: 'error'})})
      },
      formatter(row, column) {
        return row.address;
      },
      seeImg(index){

        this.$refs[`abc${index}`].$emit('click')
        console.debug(this.$refs[`abc${index}`])
        console.debug(this.$refs.bbb)
      }
    }
  }
</script>

<style>
.sev_lis_wrapper .el-image__error, .el-image__inner, .el-image__placeholder{
  /* width: 50px;
  height:50px;
  opacity: 1;
  position: relative; */
  opacity: 0;
  border: 1px solid red;
}
.sev_lis_wrapper .el-table,.el-table__row,.el-table__header-wrapper {
  /* margin-left: 50px; */
  /* width: 100%; */
  /* text-align: center; */
  border-radius: 10px !important;
}
</style>


<style scoped>
.service_form_wrapper{
  position: fixed;
  /* top: 100px; */
  right: 35%;
  margin: auto auto;
}

.el-image{
  width: 100%;
  height: 100%;
  position: absolute;
  right: 5%;
  box-shadow: 0 0 0px green;
}
.el-table{
  position: relative;
}
.sev_lis_wrapper{
  display: flex;
  width: 100%;
  /* flex: 1; */
  height: 100%;
  border: 0px solid red;
  background-color: rgb(255, 255, 255);
  border-radius: 10px !important;
}

.add_service_btn{
  font-size: 45px;
  color: rgb(164, 173, 173);
  border-radius: 100px;
  box-shadow: rgb(214, 214, 198) 0 0 5px;
  position: fixed;
  bottom: 30px;
  right: 10px;
  transition: 0.5s;
}
.add_service_btn:hover{
  box-shadow: rgb(88, 88, 81) 0 0 5px;
}
</style>